<template>
 <div class="yingmoo-casedetails">
    <ym-header></ym-header>
    <ym-medianav></ym-medianav>
    <ym-detailsnav></ym-detailsnav>
<!--  当前定位  -->
    <div class="locat">
      <img src="../assets/ym-list/dw.png" />
      <p>
        当前位置：
        <span>首页>案例展示> </span>
        <span class="text">'标题'</span>
      </p>
    </div>
<!--  案例头部图片  -->
    <div class="case-pacture">
      <img src="../assets/ym-case/banner.png" />
    </div>
<!--  案例详情  -->
    <div class="case-details">
      <!--   案例标题  -->
      <dl class="case-title">
        <dt class="img"></dt>
        <dd class="text">
          <p><span class='lefts'>客户公司名称：</span><span>XXXXX有限公司</span></p>
          <p>
            <span class='left'>行业：<span>餐饮业</span></span>
            <span class='right'>所在地区：<span>北京-西城区</span></span>
          </p>
          <p>
            <span class='left'>鹰目成交价：<span>餐饮业</span></span>
            <span class='right'>投放周期：<span>北京-西城区</span></span>
          </p>
          <p>
            <span class='left'>媒体分类：<span>餐饮业</span></span>
            <span class='right'>投放地区：<span>北京-西城区</span></span>
          </p>
          <p class="details">摘要插画搭配实物，尽管这样的设计很常见，但是把葡萄作为自行车轮、热气球、耳机等的设计却很新颖，非常贴合葡萄汁饮料的宣传主题，让人一目了然。插画搭配实物，尽管这样的设计很常见。</p>
          <p class="title-footer">
            <span><img src="../assets/ym-case/look.png" />234</span>
            <span>2018-02-07</span>
          </p>
        </dd>
      </dl>
      <!--   设计创意   -->
      <div class="case-creativity">
        <div class="creativity-header">
          <img src="../assets/ym-case/creativity.png" />
          <span>设计创意</span>
          <img src="../assets/ym-case/creativity.png" />
        </div>
        <p class="thought">这个设计带着很智力的感觉。采用了大量智力的元素，无论是人文特点，还是风土人情，都能在这些微缩的画面中找出。不仅宣传了智力航空，还很具有人情味，体现了设计师的良苦用心。</p>
        <div class="lunbo">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="creativity-header">
          <img src="../assets/ym-case/creativity.png" />
          <span>投放媒体点位</span>
          <img src="../assets/ym-case/creativity.png" />
        </div>
        <div class="case-list">
          <dl class="model" v-for="n in list" :key="n">
            <dt class="images"></dt>
            <dd class='name'>{{n.name}}</dd>
            <dd class='money'>{{n.money}}</dd>
            <dd class='city'>{{n.city}}</dd>
          </dl>
        </div>
<!--  分页器  -->
<!--
        <div class="paging">
          <el-pagination
            :page-size="10"
            background
            layout="prev, pager, next, jumper"
            :total="1000">
          </el-pagination>
        </div>
-->
        <div class="page-footer">
          <p class='left'>上一篇 <span>新闻标题新闻标题新闻标题</span></p>
          <p class='right'>下一篇 <span>新闻标题新闻标题新闻标题</span></p>
        </div>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymDetailsnav from "@/components/ymDetailsnav.vue";
  export default {
    name: "yingmoo-casedetails",
    components: {
      ymHeader,
      ymMedianav,
      ymDetailsnav,
      ymFooter
    },
    data() {
      return {
        list: [{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        },{
          name: '媒体名称媒体名称媒体名称',
          money: '价格：120万 元/年',
          city: '山东省 济南市 拉手'
        }]
        
      }
    },
    mounted() {
      
    },
    methods: {

    }
  }

</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-carousel__indicators--outside{
    position: absolute;
    top: 285px;
    left: 40%;
  }
</style>
<style scoped lang="less">
  .yingmoo-casedetails {
    width: 100%;
    background-color: #f3f9ff;
    /*当前定位*/
    .locat {
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      display: flex;
      img {
        width: 10px;
        height: 14px;
        margin-top: 19px;
        margin-right: 5px;
      }
      p {
        font-size: 12px;
        line-height: 50px;
        color: #666666;
        font-weight: bold;
        span {
          font-weight: 1;
        }
        .text {
          color: #f29600;
        }
      }
    }
    
/*案例头部图片*/
    .case-pacture{
      width: 1200px;
      height: 300px;
      background-color: #036eb7;
      margin: 0 auto;
    }
/*案例详情*/
    .case-details{
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
    /*案例标题*/
      .case-title{
        width: 100%;
        height: 300px;
        background-color: white;
        .img{
          width: 300px;
          height: 237px;
          float: left;
          background-color: #036eb7;
          margin-top: 30px;
          margin-left: 30px;
        }
        .text{
          width: 810px;
          height: 237px;
          float: left;
          margin-top: 30px;
          margin-left: 30px;
          p{
            padding-left: 5px;
            margin-top: 15px;
            font-size: 16px;
            color: #727272;
            .lefts,.left,.right{
              font-weight: bold;
              color: #484848;
              span{
                font-weight: 100;
                color: #727272;
              }
            }
            .left{
              width: 300px;
              display: inline-block;
            }
          }
          .details{
            margin-top: 18spx;
            line-height: 22px;
          }
          .title-footer{
            font-size: 12px;
            margin-top: 40px;
            span{
              img{
                margin-right: 10px;
                position: relative;
                top: 2px;
              }
              &:nth-child(1){
                float: left;
              }
              &:nth-child(2){
                float: right;
                margin-top: 2px;
              }
              
            }
          }
        }
      }
      /*设计创意*/
      .case-creativity{
        margin-top: 20px;
        background-color: white;
        padding-top: 35px;
        .creativity-header{
          margin: 0 auto;
          width: 900px;
          height: 25px;
          img{
            margin-top: 5px;
            float: left;
          }
          span{
            height: 25px;
            float: left;
            width: 135px;
            line-height: 25px;
            text-align: center;
            border-radius: 10px;
            display: inline-block;
            background-color: #036eb7;
            margin: 0px 64px;
            color: white;
            font-weight: bold;
          }
        }
        .thought{
          width: 980px;
          margin: 0 auto;
          text-indent: 2em;
          font-size: 16px;
          line-height: 36px;
          color: #3d3d3d;
          margin-top: 15px;
        }
        .lunbo{
          width: 800px;
          height: 320px;
          margin: 0 auto;
          background-color: aquamarine;
          margin-top: 20px;
          margin-bottom: 35px;
        }
        .case-list{
          width: 1140px;
          height: 550px;
          margin: 0 auto;
          .model{
            margin-top: 20px;
            margin-left: 17px;
            float: left;
            &:nth-child(1){
              margin-left: 0;
            }
            &:nth-child(6){
              margin-left: 0;
            }
            .images{
              width: 213px;
              height: 171px;
              background-color: aqua;
            }
            dd{
              margin-left: 10px;
              color: #3d3d3d;
            }
            .name{
              font-size: 14px;
              margin-top: 10px;
              line-height: 24px;
            }
            .money{
              color: red;
            }
            .money,.city{
              font-size: 12px;
              line-height: 24px;
            }
          }
        }
/*
        .paging {
          width: 1200px;
          height: 35px;
          margin: 23px auto;
          text-align: center;
        }
*/
        .page-footer{
          width: 900px;
          padding: 0px 120px;
          height: 40px;
          margin: 0 auto;
          clear: both;
          line-height: 40px;
          border-top: 2px solid #036eb7;
          margin-top: 20px;
          p{
            font-size: 14px;
            color: #999999;
            cursor: pointer;
            &:hover{
              color: #f29600;
            }
          }
          .left{
            float: left;
          }
          .right{
            float: right;
          }
        }
      }
    }
  }

</style>
